<!DOCTYPE html>
<html lang="en">
<head>
     
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no">
   <title>しゅふがく - ZFE.ONE</title>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <meta property="og:type" content="website">
   <meta property="og:title" content="しゅふがく - ZFE.ONE">
   <meta property="og:url" content="http://zfe.one">
   <meta property="og:site_name" content="しゅふがく - ZFE.ONE">
   <meta property="og:description" content="ZFE.ONE">
   <meta property="og:image" content="http://zfe.space/images/headimage.png">
    <link rel="shortcut icon" href=" favicon.ico" type="image/x-icon">
    <link rel="icon" href=" favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="APlayer.min.css">
    <link href="metro-all.css?ver=@@b-version" rel="stylesheet">
    <link href="start.css" rel="stylesheet">
	<link href="justaddmusic.css" rel="stylesheet">

	
    <title>ZFE.ONE</title>
</head>
<body  class="bg-dark fg-white h-vh-100 m4-cloak">


    <div class="container-fluid start-screen h-100 main" style="backdrop-filter: blur(10px);width:100%;overflow-x:hidden">
        <h1 class="start-screen-title">ZFE.ONE</h1> 
 
        <div class="tiles-area clear">
            <div class="tiles-grid tiles-group size-2 fg-white" data-group-title="创建" >
                <a  href="https://zfe.space" data-role="tile" class=" fg-white" data-cover="blog.png" data-size="wide">
                    
                    <span class="branding-bar">我的博客</span>
                </a>
					<a target="_blank"  href="https://steamcommunity.com/profiles/76561198133705724/" data-role="tile" data-size="small" style="background-color: #2a475e">
                    <span class="fa icon-steam icon"></span>
                </a>
				<a target="_blank" href="https://github.com/zfour" data-role="tile" data-size="small" class="bg-indigo">
                    <span class="fa icon-github icon"></span>
                </a>
				<a target="_blank" href="https://space.bilibili.com/1652398/" data-role="tile" data-size="small" style="background-color: #ff5c7c">
                    <span class="fa icon-bilibili-line icon"></span>
                </a>
				<a target="_blank" data-role="tile" data-size="small" style="background-color: #fc3">
                     <span class="fa icon-weibo icon"></span>
                </a>
				
			   
                <div id="weather-v2-plugin-standard" data-role="tile" data-size="wide" ></div>
				
<script>
WIDGET = {
  CONFIG: {

    "layout": 1,
    "width": "310",
    "height": "150",
    "background": 1,
    "dataColor": "FFFFFF",
    "borderRadius": 1,
    "key": "FtmcNnOSjp"
  }
}
</script>

<script src="https://apip.weatherdt.com/standard/static/js/weather-standard-common.js?v=2.0"></script>
       
           
            </div>

            <div class="tiles-grid tiles-group size-2 fg-white" data-group-title="关于我">
                <div data-role="tile" data-cover="https://zfe.space/images/headimage.png">
                    <span class="branding-bar">しゅふがく</span>
                </div>
				<div data-role="tile" class=" fg-white" style="background-color: #60a917">
                    <ul >
					<li style="list-style-type:none;font-size: 0.8rem;"> <b>性别：</b>男</li>
					<li style="list-style-type:none;font-size: 0.8rem;"> <b>年龄：</b>25</li>
					<li style="list-style-type:none;font-size: 0.8rem;"> <b>住址：</b>湖北 武汉</li>
					<li style="list-style-type:none;font-size: 0.8rem;"> <b>学历：</b>艺术 硕士‍</li>
					<li style="list-style-type:none;font-size: 0.8rem;"> <b>爱好：</b>游戏 动漫</li>
					</ul>
                    <span class="branding-bar">个人信息</span>
                  
                </div>
				    <div data-role="tile" class="  fg-white" style="background-color: #2a475e" data-size="wide" >
                    <ul >
					<span style="font-size: 0.8rem">我，爱研究技术。😊<br>
					擅长制作网站和游戏策划。🎮<br>
					目标是前往日本读博。🗾<br>
					学习更多技术，提升自我。✊</span>
				    <span class="branding-bar">自我介绍</span>
					</ul>
                    
                  
                </div>
				
				 
				 
                  
               
				 <div data-role="tile" class="bg-teal fg-white" data-size="wide">
                    <ul >
					<li style="list-style-type:none;font-size: 0.7rem;margin-top:10px"><b>🎓&nbsp&nbsp&nbsp本科&nbsp&nbsp&nbsp2013-2017</b></li>
					<li style="list-style-type:none;font-size: 0.8rem;padding-bottom:10px;"> 华中农业大学 资源与环境学院 环境科学</li>
					
					<li style="list-style-type:none;font-size: 0.7rem;"><b>🎓&nbsp&nbsp&nbsp研究生&nbsp&nbsp&nbsp2017-2020</b></li>
					<li style="list-style-type:none;font-size: 0.8rem;"> 武汉理工大学 艺术与设计学院 艺术设计</li>
					
					</ul>
                    <span class="branding-bar">教育经历</span>
                  
                </div>
           
               
               
            </div>

            <div class="tiles-grid tiles-group size-1 fg-white" data-group-title="掌握技能">
                <a target="_blank" href="https://zh.wikipedia.org/wiki/MikuMikuDance" data-role="tile" data-size="small" class="bg-red" data-cover="mmd.png">
                </a>
				<a target="_blank" href="https://unity.com/cn" data-role="tile" data-size="small" class="bg-black"  >
				<img src="unity.jpg" class="icon">
                </a>
				<a target="_blank" href="https://www.adobe.com/cn/products/photoshop.html" data-role="tile" data-size="small" style="background-color: #001e36">
                    <img src="PS.svg" class="icon">
                </a>
				<a target="_blank" href="https://www.adobe.com/cn/products/premiere.html"  data-role="tile" data-size="small" style="background-color: #00005b">
                    <img src="PR.svg" class="icon">
                </a>
				
                
				
				<a target="_blank" data-role="tile" href="https://hexo.io/zh-cn/" data-size="small" style="background-color: #0e83cd">
                    <img src="hexo.png" class="icon">
                </a>
				<a  data-role="tile" data-size="small" href="https://wordpress.org/" style="background-color: #016087">
                    <img src="wp.png" class="icon">
                </a>
				<a target="_blank" data-role="tile" href="https://jquery.com/" data-size="small" style="background-color:#1b75bb" >
                    <img src="jq.png" class="icon">
                </a> 
				<a target="_blank" data-role="tile" data-size="small" href="https://www.bootcss.com/" style="background-color: #563d7c" >
                    <img src="bootstrap.png" class="icon">
                </a> 
               <a target="_blank" data-role="tile" data-size="small" href="https://www.blender.org/" style="background-color: #e87d0d" >
                    <img src="blender.png" class="icon">
                </a> 
                <a target="_blank" data-role="tile" data-size="small" href="https://www.mockplus.cn/" style="background-color: #f5f5f5">
                    <img src="mockplus.png" class="icon">
                </a>
                
            </div>

            <div class="tiles-grid tiles-group size-2 fg-white" data-group-title="盒子导航（搭建中）">
                <a data-role="tile"   data-cover="box.png" >
                    <span  class="branding-bar">盒子</span>
					<span class="badge-top">0</span>
                </a>
                <a data-role="tile"   style="background-color: #727272" >
                     <span class="fa icon-chrome icon"></span>
                    <span class="branding-bar">网站</span>
					<span class="badge-top">0</span>
                </a>
                <a href="http://zfe.space/music/" data-role="tile"  data-cover="eastmusic.jpg">
                    <span class="branding-bar">音乐</span>
                    <span class="badge-top">1000+</span>
                </a>
				 <a data-role="tile"  class="bg-green"  >
                   <span class="fa icon-images icon"></span>
                     <span class="branding-bar">图库</span>
					<span class="badge-top">0</span>
                </a>
				<a data-role="tile"  >
                    <span class="branding-bar" class="bg-blue">电影</span>
					<span class="fa icon-play icon"></span>
                    <span class="badge-top">0</span>
                </a>
				<a data-role="tile"  style="background-color: #fc3">
				 <span class="fa icon-pacman icon"></span>
                    <span class="branding-bar">游戏</span>
                    <span class="badge-top">0</span>
                </a>
            </div>

            <div class="tiles-grid tiles-group size-2 fg-white" data-group-title="网站信息">
                <a href="https://stats.uptimerobot.com/2OkvpSkWAJ" data-role="tile" class="bg-indigo fg-white">
                    <span class="fa icon-uniE903 icon"></span>
                    <span class="branding-bar">网站监控</span>
                    <span class="badge-bottom">2</span>
                </a>
				 <a  data-role="tile"  data-cover="visitor.png">
                 
                 
				 <span class="branding-bar">访问量</span>
        <span class="badge-bottom" id="busuanzi_value_site_pv"></span>
               </a>
				
                <a href="mailto:499984532@qq.com" data-role="tile" class="bg-black fg-white">
                    <span class="fa icon-mail4 icon"></span>
                    <span class="branding-bar">联系我</span>
      
                </a>
                
             
               
            </div>

        </div>
		<div class="musiccontainer" id="container" style="position: fixed; right:0; bottom:0;"></div>
			 <div    data-fixed="true" data-order="random" data-size="wide"  class="aplayer" data-id="5249407673" data-server="netease" data-type="playlist" data-list-folded="true"  
        data-volume="1.0"></div>
		<div id="footer">
        <p>© 2020 By ZFE</p>
		<p>Powered By <a target="_blank"  style="   color: #ffffff;" href="https://metroui.org.ua/index.html ">Metro 4</a></p>
    </div>
    </div>
	
    <script src="jquary.js"></script>
    <script src="JustAddMusic.js"></script>
    <script src="jquary.js"></script>
    <script src="APlayer.min.jam.js"></script>
<script async src="busuanzi.js"></script>
    <script src="metro.js"></script>
    <script src="start.js"></script>
	<script src="Meting.min.js"></script>
<script>


		// how many bars do we want to draw? Max of 128.
		var bars = 128, hue=320;

		// add the bar elements to the container div:
		for (var i=0; i<bars; i++) {
			var bar = document.createElement("div");
			bar.className = "bar";
			container.appendChild(bar);
		}
		
		// create a new JAM instance:
		var jam = new JustAddMusic({
			 // default audio to load:
			 
			paused:true,
			deltaT:150,
              avgT:150,
			// label text to include in the UI (bottom left)
			<!--label: "<b>JustAddMusic.js </b>", -->
			volume:0,
			// set the number of spectrum values we'd like to get back:
			spectrumBins: bars,

			// the ontick callback, called 60 time per second by default
			// with the latest audio data object as the only parameter
			ontick: function(o) {
				// change the base hue value on a bass hit:
				if (o.low.hit) { hue = (hue+100)%360; }

				for (var i=0; i<bars; i++) {
					// update bars based on the spectrum values:
					var style = container.childNodes[i].style, val = o.spectrum[i];
					style.height = val*20+"%";
					style.background = "hsl("+ (hue-val*180) +","+ (val*50+50) +"%,"+ (val*40+20) +"%)";
				}
			}
		});
 
setTimeout(function(){	 

jam.loadAudio(ap.audio.currentSrc);
$(".aplayer-list").click(function(){
	              ap.volume(0, true);
  				  setTimeout(function(){jam.loadAudio(ap.audio.currentSrc);console.log(ap.audio.currentSrc)},500);
				  setTimeout(function(){ap.play();ap.seek(0);jam.seek(0);ap.volume(1, true)},4000);
});
$(".aplayer-icon-back").click(function(){
	              ap.volume(0, true);
  				  setTimeout(function(){jam.loadAudio(ap.audio.currentSrc);console.log(ap.audio.currentSrc)},500);
				  setTimeout(function(){ap.play();ap.seek(0);jam.seek(0);ap.volume(1, true)},4000);
});
$(".aplayer-icon-forward").click(function(){
	              ap.volume(0, true);
  				  setTimeout(function(){jam.loadAudio(ap.audio.currentSrc);console.log(ap.audio.currentSrc)},500);
				  setTimeout(function(){ap.play();ap.seek(0);jam.seek(0);ap.volume(1, true)},4000);
});
console.log(ap.audio.currentSrc)},1500);



    
	</script>
<script>

</script>
<!--<script src="getmusicurl.js"></script>-->

</body>
</html>